<template>
  <a-spin :spinning="loading">
    <a-form
      layout="inline"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-form-item>
        <a-date-picker
          v-model:value="pageable.date"
          allowClear
          format="YYYY-MM-DD"
          valueFormat="YYYY-MM-DD"
          style="width: 180px"
        />
      </a-form-item>
      <a-form-item label="">
        <a-select
          placeholder="请选择结果"
          v-model:value="pageable.status"
          style="width: 100px"
          allowClear
        >
          <a-select-option
            v-for="(item, idx) in statusOpts"
            :key="idx"
            :value="item.value"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="">
        <a-input
          style="width: 200px"
          placeholder="请输入搜索内容"
          v-model:value="pageable.searchContent"
          allowClear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleSearch" html-type="submit">
          搜索
        </a-button>
      </a-form-item>
    </a-form>

    <!-- table start -->
    <a-table
      rowKey="id"
      :defaultExpandAllRows="true"
      :columns="columns"
      :style="{ marginTop: '20px' }"
      :data-source="data"
      :pagination="pageable"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'actions'">
          <a-button type="link" @click="view(record)">查看 </a-button>
        </template>
      </template>
    </a-table>
    <!-- table end -->
    <DetailModal ref="detailModal" />
  </a-spin>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import { tableCols, loadTable } from "./index";
import request from "@/request";
import { confirm } from "@/utils/common";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
dayjs.locale("zh-cn");

import DetailModal from "./../detailModal/index.vue";

export default defineComponent({
  components: { DetailModal },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const data = ref([]);
    const columns = ref(tableCols);
    const detailModal = ref();
    const statusOpts = ref([
      { name: "成功", value: "Success" },
      { name: "失败", value: "fail" },
    ]);

    const pageable = ref({
      pageSize: 10,
      current: 1,
      total: 0,
      date: dayjs(),
      searchContent: "",
      status: "",
      showTotal(total: any, range: any) {
        return "共" + total + "条数据";
      },
    });

    onMounted(() => {
      loadData();
    });

    const handleSearch = () => {
      pageable.value.current = 1;
      pageable.value.total = 0;
      loadData();
    };

    const loadData = () => {
      loading.value = true;
      loadTable({
        page: pageable.value.current,
        limit: pageable.value.pageSize,
        searchContent: pageable.value.searchContent,
        date: dayjs(pageable.value.date).format("YYYY-MM-DD"),
        status: pageable.value.status,
      }).then((res: any) => {
        loading.value = false;
        let records = res.records;
        if (records && records.length > 0) {
          let index = 1;
          for (let item of records) {
            item.idx = index;
            index++;
          }
        }
        data.value = records;
        pageable.value.total = parseInt(res.total);
      });
    };

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
      pageable.value.current = pagination.current;
      loadData();
    };

    const view = (record: any) => {
      detailModal.value.display(record);
    };

    return {
      loading,
      handleSearch,
      columns,
      data,
      pageable,
      handleTableChange,
      view,
      detailModal,
      statusOpts,
    };
  },
});
</script>
